<template>
    <a-card class="db_query_container">
        <a-form class="db_query_form" layout="inline" style="width: 100%;" :model="dbColumnQuery">
            <a-form-item label="数据库类型">
                <a-select
                    placeholder="请选择数据库类型"
                    v-model:value="dbColumnQuery.dbType"
                    :allow-clear="true"
                />
            </a-form-item>
            <a-form-item label="IP">
                <a-input placeholder="请输入IP" v-model:value="dbColumnQuery.ip" :allow-clear="true" />
            </a-form-item>
            <a-form-item label="端口">
                <a-input
                    placeholder="请输入端口"
                    v-model:value="dbColumnQuery.port"
                    :allow-clear="true"
                />
            </a-form-item>
            <a-form-item label="数据库名">
                <a-input
                    placeholder="请输入数据库名"
                    v-model:value="dbColumnQuery.db"
                    :allow-clear="true"
                />
            </a-form-item>
            <a-form-item label="用户名">
                <a-input
                    placeholder="请输入用户名"
                    v-model:value="dbColumnQuery.username"
                    :allow-clear="true"
                />
            </a-form-item>
            <a-form-item label="密码">
                <a-input
                    placeholder="请输入密码"
                    v-model:value="dbColumnQuery.password"
                    :allow-clear="true"
                />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="handleGetDbTable()">获取表</a-button>
            </a-form-item>
            <a-form-item label="数据库表名">
                <a-select
                    placeholder="请选择数据库表名"
                    style="width: 100%;"
                    v-model:value="dbColumnQuery.table"
                    :allow-clear="true"
                    :options="tableDatas"
                />
            </a-form-item>
            <a-form-item>
                <a-button
                    type="primary"
                    :disabled="tableDatas.length === 0"
                    @click="handleGetDbColumn()"
                >获取列信息</a-button>
            </a-form-item>
        </a-form>
    </a-card>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Bus } from '@/plugin';
// Api
import { ApiCodeGenerator } from '@/axios/api';
// Model
import { Result } from '@/model/common';
import { DbColumnQuery, DbTableQuery, DbColumnDTO } from '@/model/code_generator';

const dbTableQuery = ref(new DbTableQuery());
const dbColumnQuery = ref(new DbColumnQuery());
const tableDatas = ref(new Array<SelectOptions>());

const handleGetDbTable = () => {
    dbTableQuery.value = dbColumnQuery.value;
    ApiCodeGenerator.listTable(dbTableQuery.value)
        .then((res: Result) => {
            tableDatas.value.length = 0;
            res.data.forEach((item: string) => {
                tableDatas.value?.push({ value: item, lable: item })
            });
        });
}

const handleGetDbColumn = () => {
    Bus.emit('refresh_db_column', dbColumnQuery.value);

}
</script>
<script lang="ts">
export class SelectOptions {
    public value!: string;
    public lable!: string
}
</script>

<style lang="less" scoped>
.db_query_container {
    .db_query_form {
        margin-bottom: -16px;

        .ant-form-item {
            margin-bottom: 16px;
        }
    }
}
</style>